Skip to main content

ySelectionPicker

Description​

The ySelectionPicker is a UI component designed for creating selectable lists in web applications. It provides a user-friendly interface for selecting one or more items from a given set of options. The ySelectionPicker can, for example, be used for:

Basic Structure​

The basic structure of the ySelectionPicker shall be explained in the following. For the general structure of a yComponent please visit the YBase-components basic-structure.

SelectionPicker structure

The ySelectionPicker as seen above contains a label and a helper text and includes multiple icons and more.

Label​

The label contains the text inside the ySelectionPicker. It is on the left side of the component. It will get moved to the top, when a selection is document. The label can be clicked to trigger a Selection to make the selection list visible. You can find further explanation at the Label Property.

Helper Text​

The Helper Text is similar to the label and displays a hint related to the input that will be expected. In certain situations the helper text will be replaced by a warning or error text, which can either be set through the automatic validation or custom scripts.

Spinner Icon​

The spinner icon can also be used to make a selection and make the selection list visible. It is on the right side of the ySelectionPicker.

Properties​

Through its various properties the ySelectionPicker can be configured to suit your needs. The display below provides you with an overview of all the ySelectionPicker properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-selection-picker__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-selection-picker__component-type

The type of the component. For this component it is -selection-picker.

Name: name
String Property
--y-selection-picker__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-selection-picker__version

The custom version of the SelectionPicker-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-selection-picker__core-theme

The CoreTheme, which will be apllied to the SelectionPicker. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-selection-picker__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the SelectionPicker. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-selection-picker__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-selection-picker__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-selection-picker__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-selection-picker__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-selection-picker__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-selection-picker__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-selection-picker__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-selection-picker__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-selection-picker__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-selection-picker__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-selection-picker__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-selection-picker__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-selection-picker__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-selection-picker__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-selection-picker__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-selection-picker__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-selection-picker__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-selection-picker__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-selection-picker__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the ySelectionPicker in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

SelectionPicker Elevated
Elevated
SelectionPicker Flat
Flat
SelectionPicker Outlined
Outlined
SelectionPicker Rounded
Rounded
SelectionPicker Plain
Plain
genericsizeminWidth200px
genericsizemaxHeight44px
stylebackgroundbg-color__normal#44ddbb
styleshadowbox-shadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborder-radius8px
stylelabellabel__font-color__normal#FFFFFF
stylehinthint
styleindicatorindicator__height0px

Special Variations​

SelectionPicker MultiSelect
MultiSelect
SelectionPicker Search
With Search
SelectionPicker IconOnly
Icon Only
stylecontentmultipleSelecttrue
styleborderborder-color-top__normal#E0E0E0
styleborderborder-width-top__normal1px
styleborderborder-style-top__normalsolid
styleborderborder-color-right__normal#E0E0E0
styleborderborder-width-right__normal1px
styleborderborder-style-right__normalsolid
styleborderborder-color-bottom__normal#E0E0E0
styleborderborder-width-bottom__normal1px
styleborderborder-style-bottom__normalsolid
styleborderborder-color-left__normal#E0E0E0
styleborderborder-width-left__normal1px
styleborderborder-style-left__normalsolid
stylelabellabel__font-color__normal#22aaff
stylelabellabel'Options'
stylehinthint''
styleindicatorindicator__height0px
linkscontentsourceLinkContent[YOUR OPTIONLIST]

Options can include clearable selections, multi-select capabilities, and a search function. You can also have configurations with no label or hint text for a minimalistic approach.

Validation​

The ySelectionPicker includes an error state that can be used to display validation messages. The validation has to be done manually via JavaScript.

SelectionPicker EvtListSelect
// enabled async function
// async function onSelectionPicker_2_EvtListSelect (apiObject, component, eventData) {

const selectedProduct = eventData.data;
const isOnStock = testIfProductIsInStock(eventData.data); //own global function you need to create

if (!isOnStock) {
  // Display validation error message
  component.set("component", "state", "error", true);
  component.set(
    "component",
    "error",
    "errorMessage",
    "Please enter a valid search term."
  );
} else {
  // Clear error message
  component.set("component", "state", "error", false);
}
//}

OptionList​

You can set the list of selectable options using the Option-List property which can be found in Style > List group. There, you can add entries and give them a unique value, a label and a tooltip.

How to:

  1. Open the Detail Panel and navigate to Style, unfold List, where you can find the Option-List.
  2. The proceed to navigate to Events, unfold Input and edit EvtListSelect.
  3. Insert the snippet down below.

Payment Selection​

This simple example shows a specific scenario for a common use-case.

How to:

  1. Create a yButton.
  2. Select your ySelectionPicker again.
  3. Open the Detail Panel and navigate to Events, unfold Input, where you can find the EvtListSelect.
  4. Insert the code snippet down below.

Code example:

This code snippet disables the Proceed button when no valid payment method is selected and enables it as soon as the user chooses a valid one.

SelectionPicker EvtListSelect
// function onSelectionPicker_2_EvtListSelect (apiObject, component, eventData)
const selectedValue = eventData.data[0].value;
const proceedButton = apiObject.ui.getObject(3, "y-button", "y-page", 1); // Replace with actual ID
const validPaymentMethods = ["creditCard", "paypal", "bankTransfer"];

if (validPaymentMethods.includes(selectedValue)) {
  // Enable the proceed button if a valid payment method is selected
  proceedButton.set("component", "state", "disabled", false);
  console.log("Valid payment method selected:", selectedValue);
} else {
  // Keep the proceed button disabled if the selection is not valid
  proceedButton.set("component", "state", "disabled", true);
  console.error("Invalid payment method selected:", selectedValue);
}
// }

User Role Selection​

This example displays another example based on a ySelectionPicker with a custom list.

How to:

  1. Create a yContainer with additional children elements and modify Generic > Display > visible and set it to hidden.
  2. Select your ySelectionPicker again.
  3. Open the Detail Panel and navigate to Events, unfold Input, where you can find the EvtListSelect.
  4. Insert the code snippet down below.

Code example:

This code snippet toggles the visibility of an element, based on the selection of the ySelectionPicker.

SelectionPicker EvtListSelect
// function onSelectionPicker_2_EvtListSelect (apiObject, component, eventData)
const selectedValue = eventData.data[0].value;
const additionalOptionsPanel = apiObject.ui.getObject(
  3,
  "y-container",
  "y-page",
  1
); // Replace with actual ID
const rolesWithAdditionalOptions = ["administrator", "editor"];

if (rolesWithAdditionalOptions.includes(selectedValue)) {
  // Show additional options if the selected role has extra permissions
  additionalOptionsPanel.set("generic", "display", "visible", "visible");
  console.log("Additional options displayed for role:", selectedValue);

  // You might want to fetch and display these additional options dynamically
  fetchAndDisplayAdditionalOptions(selectedValue);
} else {
  // Hide additional options if the selected role does not have extra permissions
  additionalOptionsPanel.set("generic", "display", "visible", "hidden");
  console.log("No additional options for role:", selectedValue);
}
// A mock function to fetch additional options based on the selected role
function fetchAndDisplayAdditionalOptions(role) {
  // Fetching logic here...
  console.log("Fetching additional options for role:", role);
  // Display logic here...
}
// }